<template>
	<view>
		<!-- 下单弹窗页面 -->
		<div style="background-color:#f8f8f8; position: absolute; top:0; z-index:300; width: 100%; height: 100%; overflow-y: scroll;  overflow-x:hidden; ">
			<view style="background-color: white;margin-top: 15rpx;padding: 15rpx;">
				<view style="display:flex; justify-content:space-between;">
					<view>配送方式</view>
					<view style="color: gray">
						<span @tap="setTakeType(1)" style="margin-right: 30rpx;" :style="orderInfo.takeType === 1 ? 'color:blue' : ''">外卖配送</span>
						<span @tap="setTakeType(2)" :style="orderInfo.takeType === 2 ? 'color:blue' : ''">到店自取</span>
					</view>
				</view>
				<!-- 配送地址 -->
				<view style="margin: 15rpx 0"><textarea v-model="orderInfo.addressDetail" maxlength="100" style="border:1rpx solid #f0f0f0; width: 100%; height: 100rpx;" /></view>
				<!-- 收货人，联系电话 -->
				<view style="color:gray; display: flex; ">
					<input v-model="orderInfo.receiver" maxlength="4" style="border:1rpx solid #f0f0f0" />
					<input v-model="orderInfo.userPhone" maxlength="11" style="border:1rpx solid #f0f0f0" />
				</view>
			</view>
			<!-- 订单商品列表 -->
			<div v-for="(goods, index) in orderInfo.goodsList" :key="index" style="background-color: white;margin-top: 15rpx;padding: 15rpx; display: flex; font-size: 30rpx; ">
				<image :src="goods.image" style="margin: 10rpx ; width: 120rpx; height: 120rpx;" mode=""></image>
				<div style="width: 550rpx;">
					<div style="display: flex; justify-content:space-between;">
						<div style=" width: 400rpx; white-space: nowrap; overflow: hidden;">{{ goods.name }}</div>
						<div style="">￥{{ goods.price / 100 }}</div>
					</div>
					<div style="display: flex; justify-content:space-between;">
						<div style=" width:400rpx;white-space:nowrap;overflow:hidden;color:gray">{{ goods.propertyStr }}</div>
						<div>*{{ goods.count }}</div>
					</div>
					<div style="color:red">{{ goods.refundNo ? (goods.refunded ? '已退款' : '退款中') : '' }}</div>
				</div>
			</div>
			<!-- 其他信息 -->
			<view style="background-color: white;margin-top: 15rpx; padding: 15rpx;">
				<view>商品总价格：￥{{ orderInfo.goodsTotalPrice / 100 }}</view>
				<view>配送费：￥{{ shopInfo.sendingPrice / 100 }}</view>
				<view>包装费：￥{{ shopInfo.packingPrice / 100 }}</view>
				<view style="border-top:1rpx solid #f7f7f7; text-align:right;">
					合计
					<text style="color:red">￥{{ orderInfo.totalPrice / 100 }}</text>
				</view>
			</view>
			<!-- 备注留言 -->
			<view style="display:flex; justify-content:space-between; background-color: white; padding: 15rpx; margin: 15rpx 0;">
				订单备注：
				<textarea
					@blur="flagInputRemark = false"
					v-model="orderInfo.extraInfo"
					maxlength="100"
					style="width:520rpx; height: 150rpx;"
					placeholder="给卖家留言(100字以内)"
				></textarea>
			</view>
			<!-- 底部 -->
			<view style="display:flex; justify-content: flex-end; padding:10rpx 20rpx; margin-top: 20rpx; ">
				<view @tap="cacel" style="margin-left:20rpx; background-color:gray; color:white; padding:10rpx 35rpx;">取消</view>
				<view @tap="submitOrder" style="margin-left:10rpx; background-color:red; color:white; padding:10rpx 35rpx;">提交订单</view>
			</view>
		</div>
	</view>
</template>

<script>
import * as goodsApi from '@/api/goodsApi.js';
import * as shopApi from '@/api/shopApi.js';
import * as orderApi from '@/api/orderApi.js';
import config from '../../config.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			orderInfo: {},
			shopInfo: {
				sendingPrice: 0,
				packingPrice: 0
			}
		};
	},
	computed: {
		...mapState(['userInfo', 'cart'])
	},
	mounted() {
		let that = this;
		shopApi.getShopInfo({
			success: res => {
				this.shopInfo = res.data;
				this.orderInfo = {
					takeType: 1,
					addressDetail: this.userInfo.address,
					userPhone: this.userInfo.phone,
					receiver: this.userInfo.name,
					goodsList: this.cart
				};
				let total = 0;
				for (let i = 0; i < this.cart.length; i++) total += this.cart[i].price * this.cart[i].count;
				this.orderInfo.goodsTotalPrice = total;
				this.setTakeType(this.orderInfo.takeType);
			}
		});
	},
	methods: {
		// 设置配送方式
		setTakeType(type) {
			this.orderInfo.totalPrice = this.orderInfo.goodsTotalPrice;
			// 外卖配送：加配送费和打包费
			if (type == 1) this.orderInfo.totalPrice += this.shopInfo.sendingPrice + this.shopInfo.packingPrice;
			this.orderInfo.takeType = type;
		},
		// 取消创建订单
		cacel() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 提交订单
		submitOrder() {
			orderApi.createOrder({
				orderInfo: this.orderInfo,
				success: res => {
					uni.navigateTo({
						url: '/pages/order/pay?orderNo=' + res.data
					});
				},
				fail: res => {
					console.log('订单创建失败: ', res);
					uni.showModal({
						content: '订单创建失败: ' + res.msg,
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: '/pages/goods/goodsList'
							});
						}
					});
				},
				complete: () => {
					this.cart.splice(0)
				}
			});
		}
	}
};
</script>

<style></style>
